<template>
  <!--购物车提交订单页-->
  <div>
    <div v-for="item in goodsList">
      <wv-panel class="header">
        <wv-media-box :thumb="item.coverImg | imgPathFilter" :title="item.goodsName" :description="item.unitPrice +'元'">
        </wv-media-box>
        <span class="num">{{item.goodsNum}}
      </span>
        <div class="total">
          小计 <span>{{item.unitPrice * item.goodsNum}}元</span>
        </div>
      </wv-panel>
    </div>
    <div class="all">总计
      <span>{{totalPrice}}元</span>
    </div>
    <div class="divider">
    </div>
    <offer :goodsList="goodsList" :resultprice="totalPrice" :buySource="2" :employeeId="employeeId"></offer>
  </div>
</template>

<script type="text/ecmascript-6">
  import offer from '../offertemplate/offertemplate'
  export default {
    name: 'tijiaogouwuchedingdan',
    props: {},
    data() {
      return {
        src: require('../../assets/guibin.png'),
        goodsList: [],
        employeeId: ''
      };
    },
    methods: {},
    computed: {
      totalPrice: function () {
        var totalPrice = 0;
        var goodsList = this.goodsList;
        for (let key in goodsList) {
          totalPrice += goodsList[key].goodsNum * goodsList[key].unitPrice;
        }
        return totalPrice;
      }
    },
    created() {
      var employeeId = this.$myUtils.GetUrlParam('employeeId');
      this.employeeId = employeeId;
      var goodsList = JSON.parse(this.$route.query.subGoodsList);
      this.goodsList = goodsList;
      console.log(goodsList)
    },
    components: {
      offer
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .header {
    position: relative;
    /*border-bottom: 1px solid #eee;*/
    padding-bottom: 10px;

    .num {
      position: absolute;
      right: 10px;
      bottom: 45px;
      font-size: 15px;
      color: #666;
    }
    .total {
      font-size: 15px;
      color: #111;
      text-align: left;
      padding: 0 20px;
      span {
        float: right;
        color: #2f95f0;
      }
    }
  }

  .all {
    font-size: 15px;
    color: #111;
    text-align: left;
    padding: 10px 20px;
    border-top: 1px solid #eee;
    font-weight: 700;
    span {
      color: #fc8e4f;
      float: right;
      font-weight: normal;

    }
  }

  .weui-panel:after {
    border-bottom: none;
  }

  .divider {
    height: 10px;
    background-color: #eee;
  }
</style>
